<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            padding: 100px;
            margin: 150px auto;
            border: 1px dashed;
            perspective: 800px;
            text-align: center;
            line-height: 200px;
            position: relative;
        }
        #box .cube{
            width: 200px;
            height: 200px;
            border: 1px solid;
            transform-style: preserve-3d;
            position: relative;
            transition: 5s;
            /*transform-origin: center center -100px;*/
            transform: translateZ(-100px) rotateY(0deg);
        }
        #box .cube div{
            position: absolute;
            width: 200px;
            height: 200px;
            box-shadow:inset 0 0 5px rgba(0,0,0,0.6);

            background: -webkit-linear-gradient(
                    left,
                    rgba(54, 226, 248, 0.5) 0px,
                    rgba(54, 226, 248, 0.5) 3px,
                    rgba(0, 0, 0, 0) 0px),
            -webkit-linear-gradient(
                    top,
                    rgba(54, 226, 248, 0.5) 0px,
                    rgba(54, 226, 248, 0.5) 3px,
                    rgba(0, 0, 0, 0) 0px);
            background-size: 0.9em 0.9em;
        }
        #box .cube div:nth-child(1){
            top:-200px;
            transform-origin: bottom;
            transform: translateZ(100px) rotateX(90deg);
            transition: 3s;
        }
        #box .cube div:nth-child(2){
            top:200px;
            transform-origin: top;
            transform: translateZ(100px) rotateX(-90deg);
        }
        #box .cube div:nth-child(3){
            left:0;
            top:0;
            transform: translateZ(100px);
        }
        #box .cube div:nth-child(4){
            left:0;
            top:0;
            transform: translateZ(-100px);
        }
        #box .cube div:nth-child(5){
            left:-200px;
            transform-origin: right;
            transform: translateZ(100px) rotateY(-90deg);
        }
        #box .cube div:nth-child(6){
            left:200px;
            transform-origin: left;
            transform: translateZ(100px) rotateY(90deg);
        }




        #box .small{
            position: absolute;
            /*left:150px;*/
            /*top: 150px;*/
            width: 100px;
            height: 100px;
            border: 1px dotted purple;
            transform: translateX(50px) translateY(-150px) translateZ(0) rotateY(0);
            line-height: 100px;
            transition: 5s;
            transform-style: preserve-3d;
        }
        #box .small div{
            position: absolute;
            width:100px;
            height: 100px;
            box-shadow:inset 0 0 10px rgba(0,0,0,0.9);
        }
        #box .small div:nth-child(1){
            transform: translateY(-50px) rotateX(90deg);
        }
        #box .small div:nth-child(2){
            transform: translateY(50px) rotateX(-90deg);
        }
        #box .small div:nth-child(3){
            transform: translateX(0) translateY(0) translateZ(50px);

        }
        #box .small div:nth-child(4){
            transform: translateX(0) translateY(0) translateZ(-50px);
        }
        #box .small div:nth-child(5){
            transform: translateX(-50px) rotateY(-90deg);
        }
        #box .small div:nth-child(6){
            transform: translateX(50px) rotateY(90deg);
        }


        #box:hover .cube{
            transform: translateZ(-100px) rotateY(720deg);
        }
        #box:hover .cube div:first-child{
            transform: translateZ(100px) rotateX(-150deg);
        }
        #box:hover .small{
            transform: translateX(50px) translateY(-300px) translateZ(0) rotateY(360deg);
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="cube">
            <div>上</div>
            <div>下</div>
            <div>前</div>
            <div>后</div>
            <div>左</div>
            <div>右</div>
        </div>

        <div class="small">
            <div>上</div>
            <div>下</div>
            <div>前</div>
            <div>后</div>
            <div>左</div>
            <div>右</div>
        </div>
    </div>
</body>
</html>